<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="800"></canvas>
<script>
  var myCan = document.getElementById("myCanvas");
  // 设置画笔
  var ct = myCan.getContext("2d");
  // 元素改变:
  // 若有多个图形,谁的位置要改变就给谁设置位移
  // ,但是这样其他图形还是会受影响,用save();与restore();解决
  // 1.位移:translate(x,y)是坐标0,0点的改变
  ct.beginPath();
  ct.save();
  ct.translate(100,50);
  ct.rect(10,20,300,200);
  ct.strokeStyle="yellow";
  ct.lineWidth=5;
  ct.stroke();
  ct.restore();
  ct.closePath();

  ct.beginPath();
  ct.rect(100,300,300,200);
  ct.strokeStyle="pink";
  ct.lineWidth=5;
  ct.stroke();
  ct.closePath();

  //2.缩放scale(x,y)
  ct.beginPath();
  ct.save();
  ct.scale(1,2);
  ct.rect(500,100,300,200);
  ct.strokeStyle="blue";
  ct.lineWidth=5;
  ct.stroke();
  ct.restore();
  ct.closePath();

  // 3.旋转rotate(度数*Math.PI/180)
  ct.beginPath();
  ct.save();
  ct.rotate(20*Math.PI/180);
  ct.rect(400,0,200,200);
  ct.strokeStyle="aqua";
  ct.lineWidth=5;
  ct.stroke();
  ct.restore();
  ct.closePath();

</script>
</body>
</html>
